<!-- 音乐详情 -->
<template>
	<view>
		<view class="box">
			<view class="title">{{ musicDetail.ar[0].name }}</view>
			<view class="music flex justify-center">
				<view class="music_pic"><image :src="musicDetail.al.picUrl" class="pic" mode=""></image></view>

				<view v-if="isPlay" @click="suspendMusic()" class="player icon iconfont icon-zanting-yuankuang"></view>
				<view v-else @click="playMusic()" class="player icon iconfont icon-play"></view>
			</view>
			<!-- 猜你喜欢听 -->
			<view class="LikeMusic">
				<view class="titles">猜你喜欢听</view>
				<!-- 猜你喜欢听列表 -->
				<view class="LikeMusic_list">
					<view class="listItem flex align-center justify-between" @click="jumpMusicDetail(im.id)" v-for="(im, ix) in likeList" :key="ix">
						<view class="itemPic"><image :src="im.album.picUrl" class="pic" mode=""></image></view>
						<view class="itemTitle flex column justify-around">
							<view class="itemTitle_one">{{im.name}}</view>
							<view class="itemTitle_two">{{im.album.artists[0].name}}</view>
						</view>
						<view class="icon iconfont icon-jiantou"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '../../utils/http/api.js';
export default {
	data() {
		return {
			musicId: null, //音乐id
			isPlay: false, //是否播放
			musicDetail: {}, //音乐详情
			MusicPlay: {} ,//播放音乐的数据 url
			likeList:[] ,//猜你喜欢列表
		};
	},
	onLoad(option) {
		this.musicId = option.id;
		this.getMusicDetail(); //获取音乐详情
		this.getMusicPlay();
		this.bgAudioManager = uni.getBackgroundAudioManager();
	},
	onShow() {
		console.log(getApp().globalData, '全局');
		const { PlaymusicId, MusicPlay } = getApp().globalData;
		if (PlaymusicId == this.musicId) {
			this.isPlay = MusicPlay;
		} else {
			this.isPlay = false;
		}
		this.getMusicxg(); //猜你喜欢听列表
	},
	methods: {
		// 获取音乐详情信息
		async getMusicDetail() {
			const res = await api('/song/detail', { ids: this.musicId });
			console.log(res, '音乐详情');
			wx.setNavigationBarTitle({
				title: res.songs[0].name
			});
			this.musicDetail = res.songs[0];
		},
		// 获取音乐播放
		async getMusicPlay() {
			const res = await api('/song/url', { id: this.musicId });
			console.log(res, '音乐播放');
			this.MusicPlay = res.data[0];
		},
		// 播放音乐
		playMusic() {
			this.bgAudioManager.src = this.MusicPlay.url;
			const { PlaymusicId, MusicPlay } = getApp().globalData;
			getApp().globalData.PlaymusicId = this.musicId;
			getApp().globalData.MusicPlay = true;
			this.isPlay = true;
			this.bgAudioManager.title = this.musicDetail.name;
			console.log(getApp().globalData, '全局222');
		},
		// 暂停音乐
		suspendMusic() {
			this.bgAudioManager.pause();
			console.log(11111);
			this.isPlay = false;
			getApp().globalData.MusicPlay = false;
		},
		// 获取猜你喜欢听列表
		async getMusicxg() {
			const res = await api('/recommend/songs');
			// 随机数 0-9
			var randomNum = Math.floor(Math.random()*10);
			this.likeList = res.recommend.splice(randomNum,4)
			console.log(this.likeList, 'tuijian');
		},
		// 猜你喜欢听列表跳转到详情
		jumpMusicDetail(id){
			uni.redirectTo({
				url: '../musicDetail/musicDetail?id='+id
			});
		}
	}
};
</script>

<style lang="less">
.box {
	.title {
		text-align: center;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
	.music {
		margin-top: 60rpx;
		position: relative;
		.music_pic {
			width: 400rpx;
			height: 400rpx;
		}
		.player {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 100rpx;
			color: #ffffff;
		}
	}
	// 猜你喜欢听
	.LikeMusic {
		.titles {
			text-align: left;
			padding: 10rpx 20rpx;
			font-size: 36rpx;
			margin: 20rpx;
		}
		.LikeMusic_list {
			padding: 0rpx 30rpx;
			.listItem {
				margin-bottom: 20rpx;
				.itemPic {
					width: 100rpx;
					height: 100rpx;
				}
				.itemTitle {
					width: 500rpx;
				}
			}
		}
	}
}
</style>
